<template>
  <div class="app-container">
    <div class="app-box">
      <a-form :form="form">
        <div class="main-box">
          <a-row>
            <a-col :span="12">
              <a-form-item v-bind="formItemLayout" label="文件名称" tyle="width: 100%">
                {{ hteFile.fileName }}
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item v-bind="formItemLayout" label="文件编号" tyle="width: 100%">
                {{ hteFile.fileNo }}
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="12">
              <a-form-item v-bind="formItemLayout" label="文件类别" tyle="width: 100%">
                {{ hteFile.fileTypeName }}
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item v-bind="formItemLayout" label="双标准编号" style="width: 100%">
                {{ hteFile.standardNo }}
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="12">
              <a-form-item v-bind="formItemLayout" label="生效时间" tyle="width: 100%">
                {{ hteFile.effectTime }}
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item v-bind="formItemLayout" label="文件废除日期" style="width: 100%">
                {{ hteFile.abolishTime }}
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="12">
              <a-form-item v-bind="formItemLayout" label="文件用途" tyle="width: 100%">
                {{ hteFile.purpose }}
              </a-form-item>
            </a-col>
            <!--            <a-col :span="12">-->
            <!--              <a-form-item v-bind="formItemLayout" label="授权" style="width: 100%">-->
            <!--                <a-checkbox-group-->
            <!--                  v-model="hteFile.authorityArr"-->
            <!--                  name="checkboxgroup"-->
            <!--                  :options="[-->
            <!--                    { label: '下载', value: 'd' },-->
            <!--                    { label: '打印', value: 'p' },-->
            <!--                  ]"-->
            <!--                />-->
            <!--              </a-form-item>-->
            <!--            </a-col>-->
          </a-row>

          <!--          <a-row>-->
          <!--            <a-col :span="12">-->
          <!--              <a-form-item v-bind="formItemLayout" label="所属部门" tyle="width: 100%">-->
          <!--                <a-input v-model="hteFile.addDept" />-->
          <!--              </a-form-item>-->
          <!--            </a-col>-->
          <!--            <a-col :span="12">-->
          <!--              <a-form-item v-bind="formItemLayout" label="拟稿部门" tyle="width: 100%">-->
          <!--                <a-input v-model="hteFile.draftDept" />-->
          <!--              </a-form-item>-->
          <!--            </a-col>-->
          <!--          </a-row>-->

          <a-row>
            <a-col :span="12">
              <a-form-item v-bind="formItemLayout" label="拟稿人" tyle="width: 100%">
                {{ hteFile.draftMan }}
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item v-bind="formItemLayout" label="文件状态" tyle="width: 100%">
                <span v-if="hteFile.state === 1">拟稿</span>
                <span v-else>状态转换</span>
              </a-form-item>
            </a-col>
          </a-row>

          <!--          <a-row>-->
          <!--            <a-col :span="12">-->
          <!--              <a-form-item v-bind="formItemLayout" label="所属部门负责人" style="width: 100%">-->
          <!--                <a-input v-model="hteFile.addDeptMan" />-->
          <!--              </a-form-item>-->
          <!--            </a-col>-->
          <!--          </a-row>-->
        </div>
        <div>扩展属性</div>
        <div class="attr-box" v-show="classAttrList.length > 0">
          <a-form-item
            v-bind="formItemLayout"
            class="attr-item"
            v-for="(item, key) in classAttrList"
            :key="key"
            :label="item.name"
          >
            <span v-model="item.content" />
          </a-form-item>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  components: {},
  data() {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 18 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 20 },
          sm: { span: 12 },
        },
      },
      hteFile: {},
      classAttrList: [],
      urls: {
        listAttr: '/lib/hteLibFile/attrs',
      },
      form: this.$form.createForm(this, { name: 'form' }),
    }
  },
  created() {},
  methods: {
    /**
     * 获取分类扩展属性
     */
    fetchClassAttr(classId, fileId = 0, version = 0) {
      if (this.hteFile.fileType) {
        let classId = this.hteFile.fileType
        getAction(this.urls.listAttr + '?classId=' + classId + '&fileId=' + fileId + '&version=' + version, {}).then(
          (res) => {
            if (res.success) {
              this.classAttrList = res.result
            } else {
              this.$message.error('获取分类拓展属性错误')
            }
          }
        )
      } else {
        this.classAttrList = []
      }
    },

    setMain(hteFile) {
      this.hteFile = hteFile
      this.fetchClassAttr(this.hteFile.fileType, this.hteFile.id, this.hteFile.version)
    },
    getClassAttr() {
      this.form.validateFields((err, values) => {
        const checkParams = { ...values }
        this.classAttrList.forEach((attr) => {
          if (attr.required) {
            attr.content = checkParams['value' + attr.attrId]
          }
        })
      })
      return this.classAttrList
    },
  },
}
</script>

<style>
.attr-box {
  width: 100%;
  /* display: flex;
  align-content: flex-start;
  flex-flow: row wrap; */
}

.attr-item {
  width: 50%;
  margin-bottom: 20px;
}
.ant-form-item-label {
  /* background: #e8e7e7; */
}
.ant-form-item {
  margin-bottom: 15px;
}
</style>
